<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { RequestPath, startRequest } from '../base/RequestWork';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
// 商品列表数据
let tableData = ref([])
// 路由管理对象
let router = useRouter()
let address = ref("")
let dialogVisible = ref(false)
// 组件加载时请求购物车数据
onMounted(()=>{
    startRequest(RequestPath.shopGet, 'get', {}).then((response)=>{
        // 对属性进行赋值
        tableData.value = response.data.data.goods;
    }).catch((error)=>{
        ElMessage.error({
            message: error.response.data.error
        })
    })
})
// 更新购物车数据
function updateShopCar() {
    startRequest(RequestPath.shopUpdate, 'post', {
        goods: tableData.value
    })
}

// 删除商品
function deleteGoods(idx: number) {
    tableData.value.splice(idx, 1)
    updateShopCar()
}

// 下单操作，后续实现
function createOrder() {
    dialogVisible.value = true
}

function confirmOrder() {
    if (address.value.length == 0) {
        ElMessage.error({
            message: "请填写收货地址"
        })
        return
    }
    dialogVisible.value = false
    startRequest(RequestPath.orderCreate, 'post', {address: address.value}).then((response)=>{
        if (response.data.msg != 'ok') {
            ElMessage.error({
                message: response.data.error
            })
        } else {
            // 创建订单成功，直接跳转到订单页面
            router.push({
                name: 'order'
            })
        }
    }).catch((error)=>{
        ElMessage.error({
            message: error.response.data.error
        })
    })
}

</script>

<template>
    <!-- 头部商品件数信息 -->
    <div class="title">全部商品 共{{ tableData.length }}件</div>
    <!-- 商品列表部分 -->
    <div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="橱窗图" width="120">
                <template #default="scope">
                    <div style="width: 100px; height: 100px; overflow: hidden;">
                        <el-image style="width: 100%; height: 100%;" :src="scope.row.item.image" fit="fill" />
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="item.name" label="商品名称" width="100" />
            <el-table-column prop="item.brand" label="商品品牌" width="100" />
            <el-table-column prop="item.description" label="商品描述" width="340"></el-table-column>
            <el-table-column prop="item.category.name" label="类别" width="80"></el-table-column>
            <el-table-column prop="item.price" label="价格/元" width="80"></el-table-column>
            <el-table-column prop="item.discounted_price" label="折扣价/元" width="100"></el-table-column>
            <el-table-column label="购买数量"  width="180">
                <template #default="scope">
                    <el-input-number :min="1" :max="scope.row.item.stock ?? 0" v-model="scope.row.count" @change="updateShopCar"/>
                </template>
            </el-table-column>
            <el-table-column label="操作"  width="180">
                <template #default="scope">
                    <el-button type="danger" @click="deleteGoods(scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 下单按钮 -->
    <div style="margin-top: 30px; float: right;" @click="createOrder">
        <el-button type="primary">立即下单</el-button>
    </div>
    <el-dialog v-model="dialogVisible" title="立即下单">
        收货地址：
        <el-input v-model="address"/>
        <template #footer>
        <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="confirmOrder">
            下单
            </el-button>
        </span>
        </template>
    </el-dialog>
</template>

<style scoped>
.title {
    margin-top: 40px;
    margin-left: 20px;
    color: red;
}
</style>